<template>
    <div class="item-container">
        <div class="item-content">
            <div class="item-content-2">{{ item.name }}</div>
            <div class="item-content-2">{{ item.desc }}</div>
            <div class="item-content-2 version">
                <n-icon @click="expandDiv()" class="expaned" size="12"
                    :component="expaned ? RemoveOutline : AddOutline" />
                {{ item.version }}
            </div>
            <div class="item-content-2">
                <div class="status" v-if="item.status == 1">
                    <div class="status-unpublish"></div>
                    未发布
                </div>
                <div class="status" v-if="item.status == 2">
                    <div class="status-publish"></div>
                    已发布
                </div>
            </div>
            <div class="item-content-1 item-action">
                <div>查看</div>
                <div>编辑</div>
                <div>发布</div>
                <div @click="$emit('deleteParent', item.id)">删除</div>
            </div>
        </div>
        <div ref="content" :style="{ height: dynamicHeight }" class="child-container">
            <div class="child-header">
                <div class="item-content-2">版本号</div>
                <div class="item-content-2">状态</div>
                <div class="item-content-2">创建日期</div>
                <div class="item-content-2">更新日期</div>
                <div class="item-content-1">操作</div>
            </div>
            <div class="child" v-for="child in item.children" :key="child.id">
                <div class="item-content-2">{{ child.version }}</div>
                <div class="item-content-2">
                    <div class="status" v-if="child.status == 1">
                        <div class="status-unpublish"></div>
                        未发布
                    </div>
                    <div class="status" v-if="child.status == 2">
                        <div class="status-publish"></div>
                        已发布
                    </div>
                </div>
                <div class="item-content-2"> {{ child.created_at }}</div>
                <div class="item-content-2"> {{ child.updated_at }}</div>
                <div class="item-content-1 item-action">
                    <div>查看</div>
                    <div @click="$emit('deleteChild', child.id)">删除</div>
                </div>
            </div>
        </div>
    </div>

</template>


<script setup>

import { ref, defineProps } from 'vue'
import { NIcon } from 'naive-ui';
// 减号图标
import { AddOutline, RemoveOutline } from '@vicons/ionicons5'

const expaned = ref(false)
const content = ref(null);

// 使用 ref 来创建响应式的动态高度
const dynamicHeight = ref("0px");

// 获取内容的实际高度
const expandDiv = () => {
    if (expaned.value) {
        dynamicHeight.value = '0px';
    } else {
        // 在高度变化时添加 CSS 类来触发弹跳动画
        content.value.classList.add('height-changing');
        // 在动画完成后移除 CSS 类
        setTimeout(() => {
            content.value.classList.remove('height-changing');
        }, 600); // 动画持续时间为 0.6s，根据需要调整这里的时间
        dynamicHeight.value = `${content.value.scrollHeight}px`;
    }

    expaned.value = !expaned.value
};

const { item } = defineProps({
    item: {
        type: Object,
    }
})
</script>

<style scoped>
.item-container {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.item-content {
    padding: 0.75rem;
    justify-content: space-between;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    display: grid;
    align-items: center;
}

.item-content-2 {
    grid-column: span 2 / span 2;
}

.item-content-1 {
    grid-column: span 1 / span 1;
}

.version {
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    display: flex;
    position: relative;
    gap: 0.25rem;
}

.expaned {
    border: 1px solid gray;
    border-radius: 0.25rem;
    justify-content: center;
    display: flex;
    align-items: center;
    left: -1.25rem;
    position: absolute;
}

.status {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 0.25rem;
}

.status-unpublish {
    background-color: rgb(209 213 219);
    border-radius: 50%;
    width: 0.375rem;
    height: 0.375rem;
}

.status-publish {
    background-color: rgb(34 197 94);
    border-radius: 50%;
    width: 0.375rem;
    height: 0.375rem;
}

.item-action {
    cursor: pointer;
    color: rgb(96 165 250);
    font-size: 0.75rem;
    line-height: 1rem;
    gap: 0.45rem;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    display: flex;
}

button {
    cursor: pointer;
    background-color: transparent;
    background-image: none;
    text-transform: none;
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.child-container {
    transition: height 0.2s ease-in-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* 高度变化和弹跳动画 */
    overflow: hidden;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* 当高度变化时触发弹跳动画 */
.child-container.height-changing {
    animation: bounce 0.6s;
}

.h-0 {
    height: 0;
}

@keyframes bounce {
    0% {
        transform: translateY(-30px);
        /* 初始位置 */
    }

    50% {
        transform: translateY(0);
        /* 弹跳到顶部 */
    }

    70% {
        transform: translateY(-15px);
        /* 略微下降 */
    }

    100% {
        transform: translateY(0);
        /* 回到原始位置 */
    }
}

.child-header {
    padding: 0.5rem;
    background-color: rgb(249 250 251);
    border-radius: 0.25rem;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    display: grid;
    font-weight: 600;
}

.child {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    display: grid;
    margin: 0.5rem;
}
</style>